<script setup>
import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router';
import { User, Lock, Message, Close, Check } from '@element-plus/icons-vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {post,get} from '../api/http'
import { menuStore, loginStatus } from '../utils/store';

const loginData = reactive({username:'',password:''})
const registerData = reactive({username:'', userEmail:'',password:'',confirmPassword:''})
const isLogin = ref(true);
const router = useRouter();
const loading = ref(false)
const showFindPass = ref(false)
const findPassword = ref({})
const loadingMsg = ref('登录中')
const login = () => {
    loading.value = true
    post('login',loginData).then(res=>{
        loading.value = false
        if(res.status){
            localStorage.setItem('loginStatus', 'yes')
            get('menu').then(res=>{
                menuStore.menuList = res.data
            })
            loginStatus.value = true
            router.push('/');
        }else{
            ElMessage({showClose:true,message:res.msg,type:res.status?'success':'error'})
        }
    })
    
}
const register = () => {
    post('user/register',registerData).then(res=>{
        ElMessage({showClose:true,message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            loginData.username = registerData.username;
            loginData.password = registerData.password;
            isLogin.value = true;
        }
    })
}

const sendFindPasswordEmail = () =>{
    if(loginData.username == ''){
        ElMessageBox.alert('请在登录框中输入要找回密码的用户名','提示',{type:'warning'})
    }else{
        loading.value = true
        loadingMsg.value = '正在发送邮件'
        findPassword.value.username = loginData.username
        ElMessageBox.confirm('该操作将会为你注册时的邮箱发送一封带有验证码的邮件，是否继续？','提示',{type:'warning'}).then(()=>{
            post('user/findPassword',findPassword.value).then(res=>{
                ElMessage({type:res.status?'success':'error',message:res.msg})
                if(res.status){
                    showFindPass.value = true
                }
                loading.value = false
                loadingMsg.value = '登录中'
            })
        })
        
    }
    
}

const submitFindPassword = () => {
    post('user/findPassword',findPassword.value).then(res=>{
        ElMessage({type:res.status?'success':'error',message:res.msg})
        if(res.status){
            showFindPass.value = false
        }
    })
}

</script>
<template>
    <video loop autoplay muted style="position:absolute; z-index: -1; width:100%; height: 100%; object-fit: fill;" src="https://www.huhailong.vip/res/video/vgb2.mp4"></video>
    <main v-blog-title data-title="登录系统" v-loading="loading" element-loading-background="rgba(0,0,0,0.6)" :element-loading-text="loadingMsg">
        <el-row justify="center" align="middle">
            <el-col :lg="7" :md="10" :sm="11">
                <div class="box-left">
                    <img src="https://www.huhailong.vip/res/img/avatar.png" style="width:80px; border-radius: 5px;" />
                    <h2><a href="https://www.devcat.cn">DevCat</a> ｜ <a href="https://www.huhailong.vip">胡海龙</a></h2>
                    <p>E-Mail: hhlworkspace@qq.com</p>
                    <p>电话: 15630267221</p>
                    <p>QQ: 1976884704</p>
                </div>
            </el-col>
            <el-col :lg="7" :md="10" :sm="11">
                <div class="box-right">
                    <h2 class="login-title" v-if="isLogin">登录系统</h2>
                    <h2 class="login-title" v-if="!isLogin">注册账号</h2>
                    <el-form v-if="isLogin" class="login-form" size="large">
                        <el-form-item>
                            <el-input clearable placeholder="邮箱/用户名" v-model="loginData.username" :prefix-icon="User"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input clearable @keypress.enter="login" placeholder="密码" v-model="loginData.password" type="password" :prefix-icon="Lock"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="login" class="login-btn" type="primary">登录</el-button>
                        </el-form-item>
                        <el-link @click="isLogin=!isLogin" style="color:black;">注册账号</el-link>
                        <el-link @click="sendFindPasswordEmail" style="color:black; margin-left:10px;">找回密码</el-link>
                    </el-form>
                    <el-form v-if="!isLogin" class="register-form" size="large">
                        <el-form-item>
                            <el-input placeholder="用户名" v-model="registerData.username" :prefix-icon="User"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="邮箱" v-model="registerData.email" :prefix-icon="Message"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="密码" v-model="registerData.password" type="password" :prefix-icon="Lock"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input placeholder="确认密码" v-model="registerData.confirmPassword" type="password" :prefix-icon="Lock"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="register" class="login-btn" type="primary">提交注册</el-button>
                        </el-form-item>
                        <el-link @click="isLogin=!isLogin" style="color:black;">登录账号</el-link>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-dialog v-model="showFindPass" width="30%" :close-on-click-modal="false">
            <template #header>
                <div style="text-align:center;"><span style="font-weight: bold; font-size: 18px;">找回密码</span></div>
                <div style="text-align:center;"><span style="font-size:14px; color:gray;">验证码已发送到您注册时到邮箱，请及时查看。</span></div>
            </template>
            <el-form>
                <el-form-item label="验证码">
                    <el-input v-model="findPassword.code" placeholder="输入邮箱验证码"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="findPassword.resetPassword" placeholder="输入新的密码"></el-input>
                </el-form-item>
                <div style="text-align: right;">
                    <el-button @click="showFindPass=false" :icon="Close">取消</el-button>
                    <el-button @click="submitFindPassword" type="primary" :icon="Check">提交</el-button>
                </div>
            </el-form>
        </el-dialog>
    </main>
</template>
<style scoped>
main{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    /* background-color: #fff; */
    z-index: 1;
}
.box-left,.box-right{
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    animation-name: loginBoxMove;
    animation-duration: 1.5s;
}
.box-left{
    /* background: linear-gradient(315deg,#42d392 10%,#647eff); */
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.box-right{
    background-color: rgba(255,255,255,0.6);
    color: #213446;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.login-form,.register-form{
    width: 90%;
    animation-name: loginBoxMove;
    animation-duration: 0.5s;
}
main:deep(.el-row){
    width: 100%;
}
main:deep(.el-input__inner){
    font-weight: bold;
}
.login-title{
    padding-bottom: 10px;
    color: #000;
}
.login-btn{
    width: 100%;
}
a{
    text-decoration: none;
    color: #fff;
}
a:visited{
    color: #fff;
}
@keyframes loginBoxMove {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
</style>
